<template>
	<view>
		<view class="content">
			<view class="top-bar">
				<view class="top-bar-left" @click="backOne">
					<image src="../../static/img/common/back.png" mode=""></image>
				</view>
			</view>
			<view class="main">
				<view class="logo">
					<image src="../../static/img/index/火@2x.png" mode=""></image>
				</view>

				<view class="title">
					注册
				</view>
				<view class="form">
					<view class="username">
						<input type="text" placeholder="请输入用户名" v-model="username" @blur="checkUser" />
						<view class="tip">
							<text v-if="isUser==1">{{err.user}}</text>
							<i class="iconfont icon-duihao blue" v-if="isUser==2"></i>
						</view>
					</view>
					<view class="email">
						<input type="text" placeholder="请输入邮箱" @blur="checkEmail" v-model="email" />
						<view class="tip">
							<text v-if="isEmail==1">{{err.email}}</text>
							<i class="iconfont icon-duihao blue" v-if="isEmail==2"></i>
						</view>
					</view>
					<view class="password">
						<input type="text" :password="look" placeholder="密码" v-model="password" @blur="checkPassword" />
						<view class="tip" @tap="change">
							<i class="iconfont icon-biyan" v-if="look"></i>
							<i class="iconfont icon-yanjing" v-if="!look"></i>
						</view>
					</view>
				</view>
				<view :class="submit" @click="register">
					注册
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../common/js/request.js'
	export default {
		data() {
			return {
				look: true, //密码是否显示
				employ: false,
				username: '',
				email: '',
				password: '',
				// 判断用户名是否正确 0为初始,错误为1，通过验证为2
				isUser: 0,
				// 判断邮箱是否正确 0为初始,错误为1，通过验证为2
				isEmail: 0,
				// submit:'nosubmit',
				// 错误消息
				err: {
					user: '',
					email: ''
				}
			};
		},
		methods: {
			change() {
				this.look = !this.look
			},
			async checkUser() {
				this.err.user = ''
				this.username = this.username.trim()
				if (this.username.length < 2 || this.username.length > 10) {
					this.err.user = '用户名在2-10个字符'
					return this.isUser = 1
				}
				var res = await request({
					url: '/signup',
					data: {
						name: this.username
					}
				})
				if (res.data.status == 400) {
					this.err.user = '用户名已存在'
					return this.isUser = 1
				}
				this.isUser = 2

			},
			async checkEmail() {
				this.err.email = ''
				this.email == this.email.trim()
				var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if (this.email.length == 0) return
				if (!reg.test(this.email)) {
					this.isEmail = 1
					this.err.email = '请输入正确的邮箱地址'
					return
				}
				var res = await request({
					url: '/signup',
					data: {
						email: this.email
					}
				})
				if (res.data.status == 400) {
					this.err.email = '邮箱已存在'
					return this.isEmail = 1
				}
				this.isEmail = 2

			},
			checkPassword() {
				this.password = this.password.trim()
			},
			backOne() {
				uni.navigateBack()
			},
			async register() {
				if (this.submit == 'nosubmit') return
				var res = await request({
					url: '/signup',
					method: 'POST',
					data: {
						email: this.email,
						name: this.username,
						pwd: this.password
					}
				})
				if (res.data.status == 400) {
					return uni.showToast({
						icon: 'error',
						title: '注册失败'
					})
				}
				uni.showToast({
					icon: 'success',
					title: '注册成功'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/signin/signin'
					})
				},1500)

			}
		},
		computed: {
			submit() {
				if (this.isUser == 2 && this.isEmail == 2 && this.password.length > 0) {
					return "submit"
				} else {
					return "nosubmit"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bar {
		height: 88rpx;
		background: #FFF;

		.top-bar-left {
			float: left;
			padding: 20rpx 20rpx 20rpx 20rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.content {
		padding-top: var(--status-bar-height);
	}

	.main {
		padding: 0 56rpx;

		.logo {
			height: 92rpx;
			padding: 80rpx 222rpx 55rpx;

			image {
				width: 192rpx;
				height: 92rpx;
			}
		}

		.title {
			font-size: 56rpx;
			color: #272832;
			letter-spacing: 0;
			font-weight: 500;
		}

		.form {

			.username,
			.password,
			.email {
				position: relative;

				.tip {
					position: absolute;
					right: 0;
					bottom: 22rpx;

					text {
						color: #FF5D5B;
						font-size: 28rpx;
						letter-spacing: 0;
						font-weight: 500;
					}
				}

				.iconfont {
					font-size: 42rpx;
				}

				.blue {
					color: blue;
				}
			}

			input {
				border-bottom: 2rpx solid #e5e5e5;
				margin-top: 68rpx;
				padding-bottom: 18rpx;
				font-size: 36rpx;
			}

		}

		.submit {
			margin: 116rpx 56rpx 0;
			width: 520rpx;
			line-height: 96rpx;
			text-align: center;
			background: #FFE431;
			box-shadow: 0rpx 50rpx 32rpx -36rpx rgba(255, 228, 49, 0.4);
			border-radius: 48rpx;
			font-size: 32rpx;
			color: #272832;
			letter-spacing: 0;
			font-weight: 500;
		}

		.nosubmit {
			margin: 116rpx 56rpx 0;
			width: 520rpx;
			line-height: 96rpx;
			text-align: center;
			background: rgba(39, 40, 50, 0.20);
			border-radius: 48rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			letter-spacing: 0;
			font-weight: 500;
		}
	}
</style>
